<template>
    <div>
        <page-header title="第一步" content="设置菜单&路由"/>

        <page-main>
            <form-create
                v-model="fapi"
                :rule="rule"
                :option="option"
            ></form-create>
        </page-main>
        <fixed-action-bar>
            <el-button type="success" @click="onSuccess">完成</el-button>
            <el-button type="primary" @click="onSubmit">保存，进入下一步</el-button>
        </fixed-action-bar>
    </div>
</template>

<script>

export default {
    name: "new_page_1",
    data() {
        return {
            fapi: null,
            rule: [
                {
                    "type": "FcRow",
                    "children": [
                        {
                            "type": "col",
                            "props": {
                                "span": 8,
                                "offset": 0,
                                "push": 0,
                                "pull": 0
                            },
                            "children": [
                                {
                                    "type": "cascader",
                                    "field": "parent",
                                    "title": "选择上级菜单",
                                    "info": "",
                                    "effect": {
                                        "fetch": ""
                                    },
                                    "props": {
                                        "options": [],
                                        "props": {
                                            "expandTrigger": "hover",
                                            "checkStrictly": true,
                                            "emitPath": false
                                        },
                                        "size": "medium",
                                        "collapseTags": false,
                                        "separator": " > ",
                                        "clearable": true
                                    },
                                    "_fc_drag_tag": "cascader",
                                    "hidden": false,
                                    "display": true,
                                    "value": null,
                                    "validate": [
                                        {
                                            "trigger": "blur",
                                            "mode": "required",
                                            "message": "上级菜单必选",
                                            "required": true
                                        }
                                    ]
                                },
                            ],
                            "_fc_drag_tag": "col",
                            "hidden": false,
                            "display": true
                        },
                        {
                            "type": "col",
                            "props": {
                                "span": 12,
                                "offset": 0,
                                "push": 0,
                                "pull": 0
                            },
                            "children": [
                                {
                                    "type": "select",
                                    "field": "page_style",
                                    "title": "页面类型",
                                    "info": "",
                                    "effect": {
                                        "fetch": ""
                                    },
                                    "options": [
                                        {
                                            "value": "0",
                                            "label": "无"
                                        },
                                        {
                                            "value": "1",
                                            "label": "表格"
                                        },
                                        {
                                            "value": "2",
                                            "label": "表单"
                                        }
                                    ],
                                    "_fc_drag_tag": "select",
                                    "hidden": false,
                                    "display": true,
                                    "validate": [
                                        {
                                            "trigger": "blur",
                                            "mode": "required",
                                            "message": "请选择页面类型",
                                            "required": true,
                                            "type": "string"
                                        }
                                    ]
                                },
                            ],
                            "_fc_drag_tag": "col",
                            "hidden": false,
                            "display": true
                        }
                    ],
                    "_fc_drag_tag": "row",
                    "hidden": false,
                    "display": true
                },
                {
                    "type": "input",
                    "field": "path",
                    "title": "路径",
                    "info": "",
                    "props": {
                        "clearable": true,
                        "type": "text"
                    },
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true,
                    "validate": [
                        {
                            "trigger": "blur",
                            "mode": "required",
                            "message": "路径必填",
                            "required": true,
                            "type": "string"
                        }
                    ]
                },
                {
                    "type": "input",
                    "field": "title",
                    "title": "名称",
                    "info": "",
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true,
                    "validate": [
                        {
                            "trigger": "blur",
                            "mode": "required",
                            "message": "名称必填",
                            "required": true,
                            "type": "string"
                        }
                    ]
                },
                {
                    "type": "input",
                    "field": "name",
                    "title": "英文名称",
                    "info": "",
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true,
                    "validate": [
                        {
                            "trigger": "change",
                            "mode": "required",
                            "message": "英文名称必填",
                            "required": true,
                            "type": "string"
                        }
                    ]
                },
                {
                    "type": "input",
                    "field": "icon",
                    "title": "icon名称",
                    "info": "",
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true
                },
                {
                    "type": "FcRow",
                    "props": {
                        "type": "default",
                        "gutter": 2,
                        "justify": "start"
                    },
                    "children": [
                        {
                            "type": "col",
                            "props": {
                                "span": 7,
                                "offset": 0,
                                "push": 0,
                                "pull": 0
                            },
                            "children": [
                                {
                                    "type": "radio",
                                    "field": "breadcrumb",
                                    "title": "是否展示面包屑",
                                    "info": "",
                                    "props": {
                                        "_optionType": 0,
                                        "type": "button"
                                    },
                                    "options": [
                                        {
                                            "value": true,
                                            "label": "是"
                                        },
                                        {
                                            "value": false,
                                            "label": "否"
                                        }
                                    ],
                                    "_fc_drag_tag": "radio",
                                    "hidden": false,
                                    "display": true,
                                    "value": true
                                }
                            ],
                            "_fc_drag_tag": "col",
                            "hidden": false,
                            "display": true
                        },
                        {
                            "type": "col",
                            "props": {
                                "span": 7
                            },
                            "children": [
                                {
                                    "type": "radio",
                                    "field": "sidebar",
                                    "title": "是否在侧边栏展示",
                                    "info": "",
                                    "props": {
                                        "_optionType": 0,
                                        "type": "button"
                                    },
                                    "options": [
                                        {
                                            "value": true,
                                            "label": "是"
                                        },
                                        {
                                            "value": false,
                                            "label": "否"
                                        }
                                    ],
                                    "_fc_drag_tag": "radio",
                                    "hidden": false,
                                    "display": true,
                                    "value": true
                                }
                            ],
                            "_fc_drag_tag": "col",
                            "hidden": false,
                            "display": true
                        }
                    ],
                    "_fc_drag_tag": "row",
                    "hidden": false,
                    "display": true
                },
                {
                    "type": "input",
                    "field": "activeMenu",
                    "title": "菜单栏高亮路径",
                    "info": "不填默认为本路径",
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true
                },
                {
                    "type": "input",
                    "field": "redirect",
                    "title": "跳转路径",
                    "info": "不填默认为本路径",
                    "_fc_drag_tag": "input",
                    "hidden": false,
                    "display": true
                },
                {
                    "type": "checkbox",
                    "field": "auth",
                    "title": "权限组",
                    "info": "",
                    "effect": {
                        "fetch": {
                            "action": process.env.VUE_APP_API_ROOT + "all_role",
                            "method": "GET",
                            "data": {},
                            "headers": {},
                            "_parse": "",
                            "to": "options"
                        }
                    },
                    "props": {
                        "_optionType": 1
                    },
                    "_fc_drag_tag": "checkbox",
                    "hidden": false,
                    "display": true,
                    "validate": [
                        {
                            "trigger": "blur",
                            "mode": "required",
                            "message": "请选择权限组",
                            "required": true,
                            "type": "array"
                        }
                    ]
                }
            ],
            option: {
                "form": {
                    "labelPosition": "right",
                    "size": "medium",
                    "labelWidth": "125px",
                    "hideRequiredAsterisk": false,
                    "showMessage": true,
                    "inlineMessage": true
                },
                submitBtn: false
            }
        }
    },
    mounted() {
        let options = [{value: '0', label: '无'}];
        options[0].children = this.$helper.getRouterCascader(this.$store.state.menu.routes)
        this.rule[0].children[0].children[0].props.options = options
    },
    methods: {
        onSubmit() {
            this.fapi.submit((formData, fapi) => {
                alert(JSON.stringify(formData))
            })
        },
        onSuccess() {
            this.fapi.submit((formData, fapi) => {
                alert(JSON.stringify(formData))
            })
        }
    }
}
</script>
